<template>
  <div class="content">
    <dc-header :title="this.$route.params.title" :page-to="'/inform'"></dc-header>
    <div class="content-body">
      <div  class="head-top"
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="50">
        <div v-for="inform in informs">
          <mt-badge class="timeline mt20" size="small" color="#d9d9d9">{{inform.receiveTime}}</mt-badge>

          <div class="bg-white info-content">
            <div class="info-header">
              <i class="iconfont" :class="icon" :style="{color: informColor}"></i>
              <span class="info-inner">
              {{inform.msgTitle}}
            </span>
            </div>
            <div class="info-text" v-html="inform.msgContent"></div>
            <div v-if="inform.linkType=='1'" class="info-footer" @click="checkDetail(inform.linkType, inform.msgId)">
              点击查看详情
            </div>
          </div>
        </div>
        <div class="p20" v-show="loading && !loadingEnd"> 加载中...  </div>
        <div class="p20" v-show="loadingEnd"> 没有数据了！</div>
      </div>
    </div>
  </div>
</template>
<script>
  import header from '@/common/plugins/header';
  import footer from '@/common/plugins/footer';
  import api from '@/common/api/inform';
  import constant from '@/common/constant';
  /**
   * @namespace  components/Test
   * @author ashen
   */
  export default {
    components: {
      'dc-header': header,
      'dc-footer': footer
    },
    data () {
      return {
        loading: true,
        loadingEnd: false,
        title: '',
        param: Object.assign({}, constant.pager),
        informs: [],
        icon: ''
      };
    },
    created () {
      this.param.msgTypeCode = this.$route.params.type;
      this.getList();
      if (this.$route.params.type === 'M120010') {
        this.icon = 'icon-inform-morning';
        this.informColor = '#60c3d2';
      } else if (this.$route.params.type === 'M120011') {
        this.icon = 'icon-mes-danger';
        this.informColor = '#f15b59';
      } else {
        this.icon = 'icon-inform-system';
        this.informColor = '#8d8be7';
      }
    },
    activated () {
      this.param = Object.assign({}, constant.pager);
      this.param.msgTypeCode = this.$route.params.type;
      this.getList();
    },
    methods: {
      checkDetail (type, id) {
        if (type === '1') {
          this.pager = '/sysInfo/' + id;
        }
        this.$router.push({path: this.pager, query: {type: this.$route.params}});
      },
      loadMore () {
        this.loading = true;
        this.loadingEnd = false;
        this.getList();
      },
      getList () {
        api.informs(this.param).then(res => {
          this.informs = this.informs.concat(res);
          if (res.length === this.param.limit) {
            this.param.page++;
            this.loading = false;
          } else {
            this.loadingEnd = true;
          }
        });
      }
    }
  }
  ;
</script>
<style lang="scss" scoped>
  @import "../../assets/css/variable";
  .timeline{
    background-color: #d9d9d9;
    color: #666;
    padding: px2rem(10px) px2rem(30px);
    border-radius: 6px;
  }
  .info-content {
    $info-padding: 24px;
    $info-text-margin: 30px;

    margin: px2rem($info-text-margin);
    border-radius: 3px;

    .info-header {
      font-size: px2rem(32px);
      text-align: left;
      color: #333;
      padding: px2rem($info-text-margin) px2rem($info-padding);
      i {
        float: left;
        font-size: px2rem(48px);
        margin-right: px2rem(12px);
        color: red;
        vertical-align: middle;
      }
    }
    .info-text {
      text-align: left;
      margin: 0 px2rem($info-padding);
      padding: 0 px2rem($info-padding) px2rem($info-text-margin)  px2rem(70px);
      color: #888;
    }
    .info-footer {
      border-top: 1px solid #eaeaea;
      margin: 0 px2rem($info-padding);
      padding: px2rem($info-padding) px2rem($info-padding);
      color: #888;
    }
    .info-inner {
      display: block;
      margin-left: px2rem(70px);
    }
  }
</style>
